<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>03_模板解析_表达式_vue</title>
  </head>
  <body>
    <div id="app">
      <p>{{msg}}</p>
      <p>{{person.name}}</p>
    </div>
    <script src="./js/observer.js"></script>
    <script src="./js/watcher.js"></script>
    <script src="./js/compile.js"></script>
    <script src="./js/mvvm.js"></script>
    <script>
      /*
        插值语法解析：
          1. 将节点装换成文档碎片节点
            - 创建了文档碎片节点
            - 通过 while 遍历将el的子节点插入文档碎片节点中
            - 返回文档碎片节点

          2. 编译模板
            - 提取文档碎片中所有子节点（childNodes）
            - 对所有子节点进行遍历，一一处理
            - 提取子节点的文本内容
            - 进行判断是否是文本节点，并且里面的文本内容满足插值语法
              - 如果是，就需要对插值语法进行解析
                - 内部调用多个方法，最终取出一个用来更新DOM元素的updater函数
                - 从vm上读取表达式的值
                - 调用updater方法更新元素的textContent为表达式的值
                - 到此插值语法就解析完毕了
              - 如果不是，就不处理了
            - 最终，都要对当前子节点的所有子节点进行递归遍历，确保所有节点都进行了编译  

          3. 将编译后的模板放入el中生效
      */
      debugger;
      new MVVM({
        // el: "#app",
        el: document.getElementById("app"),
        data: {
          msg: "hello mvvm",
          person: {
            name: "peihua",
          },
        },
      });
    </script>
  </body>
</html>
